import React, { useState, useEffect } from "react";
import { InputNumber, Select } from "antd";

type ModeType = "lt" | "lte" | "eq" | "gt" | "gte" | "between" | "ne" | null;

type Props = {
  value?: {
    mode: ModeType;
    op1: number | null;
    op2: number | null;
  } | null;
  onChange?: (value: any) => void;
};

export default function ConditionInput({ value, onChange }: Props) {
  const [showOp2, setShowOp2] = useState(value?.mode === "between");

  const [mode, setMode] = useState(value?.mode);
  const [op1, setOp1] = useState(value?.op1);
  const [op2, setOp2] = useState(value?.op2);

  const options = [
    {
      value: "lt",
      label: "小于",
    },
    {
      value: "lte",
      label: "小于等于",
    },
    {
      value: "eq",
      label: "等于",
    },
    {
      value: "gt",
      label: "大于",
    },
    {
      value: "gte",
      label: "大于等于",
    },
    {
      value: "between",
      label: "介于",
    },
    {
      value: "ne",
      label: "不等于",
    },
  ];

  const onModeChange = (mode: ModeType) => {
    if (mode == "between") {
      setShowOp2(true);
    } else {
      setShowOp2(false);
      setOp2(null);
    }
    setMode(mode);
    onChange?.({ mode, op1, op2 });
  };

  const onOP1Change = (op1: number) => {
    setOp1(op1);
    onChange?.({ mode, op1, op2 });
  };

  const onOP2Change = (op2: number) => {
    setOp2(op2);
    onChange?.({ mode, op1, op2 });
  };

  return (
    <div style={{ display: "inline-block" }}>
      <Select options={options} onChange={onModeChange} style={{ display: "inline-block", width: 110 }}></Select>
      <InputNumber onChange={onOP1Change} value={op1} style={{ display: "inline-block", width: 110, marginLeft: 6 }} />
      {showOp2 && (
        <InputNumber
          onChange={onOP2Change}
          value={op2}
          style={{ display: "inline-block", width: 110, marginLeft: 6 }}
        />
      )}
    </div>
  );
}
